<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>WK科技|项目概览</title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  <meta name="description" content="致力于打造最大的芯片平台" />
  <meta name="keywords" content="芯片，半导体，集成电路" />
  <link rel="stylesheet" href="./iconfont/iconfont.css" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>
  <!-- 引入axios -->
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    i,
    em {
      font-style: normal;
    }

    ul,
    .tab li {
      list-style: none;
    }

    body {
      background-color: #dadbf8;
    }

    .main {
      display: flex;
      position: absolute;
      top: 16px;
      left: 15px;
      width: 97vw;
      height: 95vh;
      background-color: #fafafc;
      border-radius: 20px;
      overflow: hidden;
    }

    .tab {
      height: 100%;
      width: 15vw;
      background-color: #fafafc;
    }

    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .header {
      width: 100%;
      height: 7vh;
      line-height: 7vh;
      background-color: #fafafc;
      border-bottom: 1px solid #fff;
    }

    .header i {
      font-size: 1.6vw;
      margin-left: 1.1vw;
      cursor: pointer;
    }

    .header i:nth-child(2) {
      margin-left: 70vw;
    }

    .big-content {
      position: relative;
      overflow: auto;
      display: flex;
      flex: 1;
      width: 100%;
      background-color: #f2f2f8;
    }

    .content {
      flex: 1;
    }

    .scroll {
      height: 100%;
      width: 1.1vw;
      background-color: #fafafc;
    }

    .logo {
      padding: 10px;
      height: 60px;
      line-height: 60px;
      margin-bottom: 20px;
      border-bottom: 1px solid #fff;
    }

    .out {
      width: 60px;
      height: 60px;
      line-height: 60px;
      overflow: hidden;
      border-radius: 50%;
    }

    .out img {
      width: 107%;
      height: 107%;
      margin-left: -2px;
      margin-top: -2px;
    }

    .chuangjian {
      position: relative;
      width: 90%;
      height: 50px;
      line-height: 50px;
      background-color: #6466e2;
      padding: 0;
      text-align: center;
      color: #fff;
      margin-bottom: 5px;
      border-radius: 10px;
      margin-left: 10px;
      cursor: pointer;
    }

    .box1 {
      display: none;
      position: absolute;
      top: 0;
      right: -130px;
      width: 130px;
      height: 170px;
      padding: 2px 5px 0;
      border-radius: 5px;
      background-color: #fff;
    }

    .box1 em {
      height: 29%;
      width: 100%;
      display: block;
      color: #fff;
      font-size: 14px;
      background-color: #9d9ee6;
    }

    .box1 i {
      display: block;
      font-size: 13px;
      margin-top: -13px;
      height: 5%;
      color: black;
    }

    .chuangjian:hover .box1 {
      z-index: 9;
      display: block;
    }

    .box1 em:hover {
      background-color: #5355c7;
    }

    ul {
      width: 100%;
      height: 100%;
      padding: 10px;
    }

    .tab li {
      position: relative;
      width: 100%;
      height: 50px;
      line-height: 50px;
      margin-bottom: 3px;
      border-radius: 10px;
      padding-left: 20px;
      cursor: pointer;
      font-size: 1.1vw;
      overflow: hidden;
    }

    .tab li div {
      width: 100%;
      height: 4vh;
      line-height: 4vh;
      font-size: 14px;
      margin-left: -0.8vw;
      margin-bottom: 4px;
      border-radius: 10px;
      padding-left: 1.7vw;
      background-color: #5355c7;
    }

    .tab li:hover {
      color: #fff;
      background-color: #5355c7;
    }

    .tab li i {
      margin-right: 0.9vh;
    }

    .xialakuang,
    .xialakuang2,
    .xialakuang3,
    .xialakuang4,
    .xialakuang5 {
      display: block;
      height: 2.7vw;
      font-size: 1vw;
      padding-left: 4vw;
      border-radius: 5px;
      width: 70%;
      cursor: pointer;
      color: #6466e2;
    }

    .xialakuang:hover,
    .xialakuang2:hover,
    .xialakuang3:hover,
    .xialakuang4:hover,
    .xialakuang5:hover {
      color: #16186d;
    }

    .color {
      background-color: #5355c7;
      color: #fff;
    }



    /* 主要内容 */
    .content_top {
      width: 100%;
      height: 400px;
      background-color: rgb(240, 240, 240);
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      align-content: space-around;
    }

    .content_top_card {
      width: 25%;
      height: 140px;
      background-color: white;
    }

    .content_top_card:hover {
      box-shadow: 1px 2px 4px hsl(220deg 60% 50%);
    }

    .top_card {
      margin-left: 40px;
      margin-right: 40px;
    }

    .progress {
      width: 75% !important;
      margin: 0 auto;
    }

    .top_card_title {
      color: #6d6d6d;
      margin-top: 20px;
      margin-left: 20px;
    }

    .top_card_sum {
      margin-top: 20px;
      margin-left: 20px;
      font-size: 30px;
    }

    .content_bottom {
      width: 100%;
      background-color: rgb(240, 240, 240);
    }

    .container {
      background-color: white;
      width: 96% !important;
      min-width: 96%;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <div class="main">
    <!--左边导航栏 -->
    <div class="tab">
      <div class="logo">
        <div class="out">
          <img src="./images/logo4.png" alt="" />
        </div>
      </div>
      <div class="chuangjian">
        创建项目
        <i class="iconfont icon-jia"></i>
      </div>
      <div class="gainian1 xialakuang4 la" style="display: none">
        项目概念
      </div>
      <div class="renwu1 xialakuang4 la" style="display: none">任务列表</div>
      <div class="chuangjian1 xialakuang4 la" style="display: none">
        创建任务
      </div>
      <ul>
        <li class="pan"><i class="iconfont icon-yibiaopan"></i>仪表盘</li>
        <li class="item">
          <i class="iconfont icon-shuxie"></i>
          我的项目
          <i class="xiala xialaone iconfont icon-jiantou_liebiaozhankai"></i>
        </li>
        <div class="yy_liebiao xialakuang kapian la" style="display: none">
          项目
        </div>
        <div class="liebiao xialakuang kapian la" style="display: none">
          列表显示
        </div>
        <div class="renwu2 xialakuang la" style="display: none">任务管理</div>
        <div class="wenjian2 xialakuang la" style="display: none">
          文件管理
        </div>
        <div class="gainian2 xialakuang la" style="display: none">
          概念动态
        </div>
        <div class="tongji xialakuang la" style="display: none">统计</div>
        <li class="renwu">
          <i class="iconfont icon-renwu"></i>我的任务
          <i class="xiala xialaone iconfont icon-jiantou_liebiaozhankai"></i>
        </li>
        <div class="yy_renwu xialakuang5 la" style="display: none">
          任务
        </div>
        <div class="bianji xialakuang5 la" style="display: none">
          编辑任务
        </div>
        <li class="baobiao">
          <i class="iconfont icon-baobiao"></i>报表管理
          <i class="xiala iconfont icon-jiantou_liebiaozhankai"></i>
        </li>
        <div class="yy_baobiao xialakuang2 la" style="display: none">报表</div>

        <div class="fenbu xialakuang2 la" style="display: none">任务分布</div>
        <div class="jinzhan xialakuang2 la" style="display: none">
          任务进展
        </div>
        <li class="xitong">
          <i class="iconfont icon-xitongshezhi"></i>系统设置
          <i class="xiala iconfont icon-jiantou_liebiaozhankai"></i>
        </li>
        <div class="xiaoxi xialakuang3 la" style="display: none">
          消息管理
        </div>
        <div class="rizhi xialakuang3 la" style="display: none">日志管理</div>
      </ul>
    </div>
    <!-- 右边大版块-->
    <div class="right">
      <div class="header">
        <i class="iconfont icon-liebiao2"></i>
        <i class="iconfont icon-Magnifier"></i>
        <i class="iconfont icon-xiaoxi"></i>
      </div>
      <div class="big-content">
        <!--------------------内容写在这里---- -->
        <div class="content">
          <!-- ----------------------------------------------------------------------------------------------------- -->
          <div class="content_top">
            <div class="content_top_card">
              <div class="top_card_title">总数</div>
              <div class="top_card_sum" id="data_top1">找不到服务器: (</div>
              <div class="progress">
                <div class="progress-bar" role="progressbar" style="" aria-valuenow="25" aria-valuemin="0"
                  aria-valuemax="100"></div>
              </div>
            </div>
            <div class="content_top_card top_card">
              <div class="top_card_title">进行中</div>
              <div class="top_card_sum" id="data_top2">找不到服务器: (</div>
              <div class="progress">
                <div class="progress-bar" role="progressbar" style="" aria-valuenow="25" aria-valuemin="0"
                  aria-valuemax="100"></div>
              </div>
            </div>
            <div class="content_top_card">
              <div class="top_card_title">已完成</div>
              <div class="top_card_sum" id="data_top3">找不到服务器: (</div>
              <div class="progress">
                <div class="progress-bar" role="progressbar" style="" aria-valuenow="25" aria-valuemin="0"
                  aria-valuemax="100"></div>
              </div>
            </div>
            <div class="content_top_card">
              <div class="top_card_title">即将到期</div>
              <div class="top_card_sum" id="data_top4">找不到服务器: (</div>
              <div class="progress">
                <div class="progress-bar" role="progressbar" style="" aria-valuenow="25" aria-valuemin="0"
                  aria-valuemax="100"></div>
              </div>
            </div>
            <div class="content_top_card top_card">
              <div class="top_card_title">已延期</div>
              <div class="top_card_sum" id="data_top5">找不到服务器: (</div>
              <div class="progress">
                <div class="progress-bar" role="progressbar" style="" aria-valuenow="25" aria-valuemin="0"
                  aria-valuemax="100"></div>
              </div>
            </div>
            <div class="content_top_card">
              <div class="top_card_title">未开始</div>
              <div class="top_card_sum" id="data_top6">找不到服务器: (</div>
              <div class="progress">
                <div class="progress-bar" role="progressbar" style="" aria-valuenow="25" aria-valuemin="0"
                  aria-valuemax="100"></div>
              </div>
            </div>
          </div>
          <div class="content_bottom">
            <div class="container mt-3">
              <h2 id="status_title">进行中</h2>
              <table class="table">
                <thead>
                  <tr>
                    <th>完成时间</th>
                    <th>任务</th>
                    <th>执行者</th>
                    <th>完成情况</th>
                    <th>创建时间</th>
                    <th>截至时间</th>
                  </tr>
                </thead>
                <tbody id="data_list">

                </tbody>
              </table>
            </div>
          </div>
        </div>
        <!------------------------------------->
        <div class="scroll"></div>
      </div>
    </div>
  </div>
  <!-- ----------------------------------script------------------------------------------>
  <script>
    const li = document.querySelectorAll(".tab li")
    li.forEach((el) => {
      el.addEventListener("click", function (e) {
        console.log(el)
        if (e.target.tagName !== "LI") return
        const old = document.querySelector(".color") // 有特殊样式的元素
        old && old.classList.remove("color") //没有就不清除,有就清除
        e.target.classList.add("color")
      })
    })
    const la = document.querySelectorAll(".la")
    //创建项目下拉框
    let flag4 = true
    const chuangjian = document.querySelector(".chuangjian")
    const xialakuang4 = document.querySelectorAll(".xialakuang4")
    chuangjian.onclick = function (e) {
      la.forEach((el) => {
        el.style.display = "none"
      })
      if (flag4) {
        xialakuang4.forEach((el) => {
          el.style.display = "block"
        })
        flag4 = false
      } else {
        xialakuang4.forEach((el) => {
          el.style.display = "none"
        })
        flag4 = true
      }
    }
    //项目下拉框
    let flag = true
    const item = document.querySelector(".item")
    const xialakuang = document.querySelectorAll(".xialakuang")
    item.onclick = function (e) {
      la.forEach((el) => {
        el.style.display = "none"
      })
      if (flag) {
        xialakuang.forEach((el) => {
          el.style.display = "block"
        })
        flag = false
      } else {
        xialakuang.forEach((el) => {
          el.style.display = "none"
        })
        flag = true
      }
    }
    // 我的任务
    let flag5 = true
    const renwu = document.querySelector(".renwu")
    const xialakuang5 = document.querySelectorAll(".xialakuang5")
    renwu.onclick = function (e) {
      la.forEach((el) => {
        el.style.display = "none"
      })
      if (flag5) {
        xialakuang5.forEach((el) => {
          el.style.display = "block"
        })
        flag5 = false
      } else {
        xialakuang5.forEach((el) => {
          el.style.display = "none"
        })
        flag5 = true
      }
    }
    //报表下拉框
    let flag2 = true
    const baobiao = document.querySelector(".baobiao")
    const xialakuang2 = document.querySelectorAll(".xialakuang2")
    baobiao.onclick = function (e) {
      la.forEach((el) => {
        el.style.display = "none"
      })
      if (flag2) {
        xialakuang2.forEach((el) => {
          el.style.display = "block"
        })
        flag2 = false
      } else {
        xialakuang2.forEach((el) => {
          el.style.display = "none"
        })
        flag2 = true
      }
    }
    //   系统管理下拉框
    let flag3 = true
    const xitong = document.querySelector(".xitong")
    const xialakuang3 = document.querySelectorAll(".xialakuang3")
    xitong.onclick = function (e) {
      la.forEach((el) => {
        el.style.display = "none"
      })
      if (flag3) {
        xialakuang3.forEach((el) => {
          el.style.display = "block"
        })
        flag3 = false
      } else {
        xialakuang3.forEach((el) => {
          el.style.display = "none"
        })
        flag3 = true
      }
    }
    // 大排它，点击某个导航栏，其他导航栏都收起 

    const send = axios.create({
      baseURL: "http://m10.ctymc.cn:24048"
    })

    

    let Sflag = 0
    function xr(x) {
      let status1 = 0
    let status2 = 0
    let status3 = 0
    let status4 = 0
    let status5 = 0
    let all = 0
      send({
        url: '/projects',
        method: 'GET'
      }).then((res) => {
        console.log(res.data)
        all = res.data.length
        console.log('all' + all)
        for (let i = 0; i < res.data.length; i++) {
          // 进行中
          if (res.data[i].status == 'active') {
            status1++
          }
          // 已延期
          if (res.data[i].status == 'overdue') {
            status2++
          }
          // 已完成
          if (res.data[i].status == 'end') {
            status3++
          }
          // 未开始
          if (res.data[i].status == 'nostart') {
            status4++
          }
          // 即将到期
          if (res.data[i].status == 'daoqi') {
            status5++
          }
        }
        let jdt = document.querySelectorAll('.progress-bar')
        jdt[0].style.width = all / all * 100 + '%'
        jdt[1].style.width = status1 / all * 100 + '%'
        jdt[2].style.width = status3 / all * 100 + '%'
        jdt[3].style.width = status4 / all * 100 + '%'
        jdt[4].style.width = status2 / all * 100 + '%'
        jdt[5].style.width = status5 / all * 100 + '%'
        console.log()


        let data1 = document.querySelector('#data_top1').innerHTML = all
        let data2 = document.querySelector('#data_top2').innerHTML = status1
        let data3 = document.querySelector('#data_top3').innerHTML = status3
        let data4 = document.querySelector('#data_top4').innerHTML = status5
        let data5 = document.querySelector('#data_top5').innerHTML = status2
        let data6 = document.querySelector('#data_top6').innerHTML = status4

        let datalist = document.querySelector('#data_list')
        if (Sflag == 0) {
          document.querySelector('#status_title').innerHTML='全部'
          datalist.innerHTML = ''
          for (let i = 0; i < res.data.length; i++) {
            datalist.innerHTML += `
          <tr>
            <td>${res.data[i].end_time}</td>
            <td>${res.data[i].projects_name}</td>
            <td>${res.data[i].projects_leader}</td>
            <td id='isstatus'>${res.data[i].status}</td>
            <td>${res.data[i].start_time}</td>
            <td>${res.data[i].updated_at}</td>
          </tr>
          `
          }
          let isstatus = document.querySelectorAll('#isstatus')
        for (let i = 0; i < res.data.length; i++) {
          if (isstatus[i].innerHTML == 'active') {
            isstatus[i].innerHTML = '进行中'
          }
          if (isstatus[i].innerHTML == 'overdue') {
            isstatus[i].innerHTML = '已延期'
          }
          if (isstatus[i].innerHTML == 'end') {
            isstatus[i].innerHTML = '已完成'
          }
          if (isstatus[i].innerHTML == 'nostart') {
            isstatus[i].innerHTML = '未开始'
          }
          if (isstatus[i].innerHTML == 'daoqi') {
            isstatus[i].innerHTML = '即将到期'
          }
          if (isstatus[i].innerHTML == 'start') {
            isstatus[i].innerHTML = '开始了'
          }
        }
        }
        if (Sflag == 1) {
          document.querySelector('#status_title').innerHTML='进行中'
          datalist.innerHTML = ''
          for (let i = 0; i < res.data.length; i++) {
            if (res.data[i].status == 'active') {
              datalist.innerHTML += `
          <tr>
            <td>${res.data[i].end_time}</td>
            <td>${res.data[i].projects_name}</td>
            <td>${res.data[i].projects_leader}</td>
            <td id='isstatus'>${res.data[i].status}</td>
            <td>${res.data[i].start_time}</td>
            <td>${res.data[i].updated_at}</td>
          </tr>
          `
            }
          }
          let isstatus = document.querySelectorAll('#isstatus')
        for (let i = 0; i < res.data.length; i++) {
          if (isstatus[i].innerHTML == 'active') {
            isstatus[i].innerHTML = '进行中'
          }
        }
        }

        if (Sflag == 2) {
          document.querySelector('#status_title').innerHTML='已完成'
          datalist.innerHTML = ''
          for (let i = 0; i < res.data.length; i++) {
            if (res.data[i].status == 'end') {
              datalist.innerHTML += `
          <tr>
            <td>${res.data[i].end_time}</td>
            <td>${res.data[i].projects_name}</td>
            <td>${res.data[i].projects_leader}</td>
            <td id='isstatus'>${res.data[i].status}</td>
            <td>${res.data[i].start_time}</td>
            <td>${res.data[i].updated_at}</td>
          </tr>
          `
            }
          }
          let isstatus = document.querySelectorAll('#isstatus')
        for (let i = 0; i < res.data.length; i++) {
          if (isstatus[i].innerHTML == 'overdue') {
            isstatus[i].innerHTML = '已延期'
          }
        }
        }

        if (Sflag == 3) {
          document.querySelector('#status_title').innerHTML='即将到期'
          datalist.innerHTML = ''
          for (let i = 0; i < res.data.length; i++) {
            if (res.data[i].status == 'daoqi') {
              datalist.innerHTML += `
          <tr>
            <td>${res.data[i].end_time}</td>
            <td>${res.data[i].projects_name}</td>
            <td>${res.data[i].projects_leader}</td>
            <td id='isstatus'>${res.data[i].status}</td>
            <td>${res.data[i].start_time}</td>
            <td>${res.data[i].updated_at}</td>
          </tr>
          `
            }
          }
          let isstatus = document.querySelectorAll('#isstatus')
        for (let i = 0; i < res.data.length; i++) {
          if (isstatus[i].innerHTML == 'daoqi') {
            isstatus[i].innerHTML = '即将到期'
          }
        }
        }

        if (Sflag == 4) {
          document.querySelector('#status_title').innerHTML='已延期'
          datalist.innerHTML = ''
          for (let i = 0; i < res.data.length; i++) {
            if (res.data[i].status == 'overdue') {
              datalist.innerHTML += `
          <tr>
            <td>${res.data[i].end_time}</td>
            <td>${res.data[i].projects_name}</td>
            <td>${res.data[i].projects_leader}</td>
            <td id='isstatus'>${res.data[i].status}</td>
            <td>${res.data[i].start_time}</td>
            <td>${res.data[i].updated_at}</td>
          </tr>
          `
            }
          }
          let isstatus = document.querySelectorAll('#isstatus')
        for (let i = 0; i < res.data.length; i++) {
          if (isstatus[i].innerHTML == 'overdue') {
            isstatus[i].innerHTML = '已延期'
          }
        }
        }

        if (Sflag == 5) {
          document.querySelector('#status_title').innerHTML='未开始'
          datalist.innerHTML = ''
          for (let i = 0; i < res.data.length; i++) {
            if (res.data[i].status == 'nostart') {
              datalist.innerHTML += `
          <tr>
            <td>${res.data[i].end_time}</td>
            <td>${res.data[i].projects_name}</td>
            <td>${res.data[i].projects_leader}</td>
            <td id='isstatus'>${res.data[i].status}</td>
            <td>${res.data[i].start_time}</td>
            <td>${res.data[i].updated_at}</td>
          </tr>
          `
            }
          }
          let isstatus = document.querySelectorAll('#isstatus')
        for (let i = 0; i < res.data.length; i++) {
          if (isstatus[i].innerHTML == 'nostart') {
            isstatus[i].innerHTML = '未开始'
          }
        }
        }
        
      })
      
    }

    xr(Sflag)

    
    let kp = document.querySelectorAll('.content_top_card')
    for (let i = 0; i < kp.length; i++) {
      kp[i].addEventListener('click', function () {
        if (i == 0) {
          Sflag = 0
          xr(Sflag)
        }
        if (i == 1) {
          Sflag = 1
          xr(Sflag)
        }
        if (i == 2) {
          Sflag = 2
          xr(Sflag)
        }
        if (i == 3) {
          Sflag = 3
          xr(Sflag)
        }
        if (i == 4) {
          Sflag = 4
          xr(Sflag)
        }
        if (i == 5) {
          Sflag = 5
          xr(Sflag)
        }
      })
    }
  </script>
    <script src="./dianji.js"></script>

</body>

</html>